<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <form action="" @submit.prevent>
            <div class="input-group">
                <label>firstName:</label>
                <input type="text" v-model="form.firstName">
                <span>{{form.firstName}}</span>
            </div>
            <div class="input-group">
                <label>lastName:</label>
                <input type="text" v-model="form.lastName">
                <span>{{form.lastName}}</span>
            </div>
            <div>
                <label>fullName:</label>
                <input type="text" v-model="fullName">
                <span>{{form.fullName}}</span>
            </div>
            <button @click="form={firstName:'',lastName:''}">重置form</button>
        </form>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            // 在给data中数据绑定数据监听时,默认只给data中根属性绑定数据监听(getter setter), 当根属性的值发生变化之后才会触发(getter setter => watch),如果根属性的值也是一个对象-> 该对象的值发生改变-> 不会触发form的(getter setter) 
            // 怎么解决?
            form:{
                firstName:"",
                lastName:"",
            }
        },
        computed:{
            // fullName:function(){
            //     return this.firstName + (this.lastName ? " " + this.lastName: "")
            // }

            fullName:{
                get:function(){
                    return this.form.firstName + (this.form.lastName ? " " + this.form.lastName: "")
                },
                set(val){
                    console.log(11111,val);
                    var list = val.split(" ");
                    this.form.firstName = list[0];
                    this.form.lastName = list[1]||"";
                }
            },
            copyForm:function(){  // 计算属性copyForm 依赖于this.form, this.form发生改变会生成新的值,赋值给copyForm
                // // 注意: 计算属性 对依赖的对象数据的监听属于深度监听 (对象本身及其子属性发生变化 都会触发计算属性)
                return JSON.parse(JSON.stringify(this.form));   // 深拷贝 
            }

        },
        watch:{
            // 深度监听  => 分别给data中的根属性及其下对象的子属性绑定绑定数据监听(getter setter),当根属性的值发生变化或者根属性下的对象的子属性属性值发生变化 => 触发根属性(watch)  
            // 深度监听可以监听data中根属性的变化(自己发生改变 或者 其下的对象的子属性发生改变)

            // 深度监听引发的新的问题 => newVal,oldVal (被监听的对象(form)的新值和旧值 => 引用同一片内存空间 => 显示的结果时一样的) (可以知道监听的对象改变了 但是不知道哪个属性变了)
            // form:{
            //     handler:function(newVal,oldVal){  // 监听到数据发生改变时执行的回调函数
            //         console.log("form中的数据改变了");
            //         console.log("form中的数据改变了newVal", JSON.stringify(newVal));
            //         console.log("form中的数据改变了oldVal", JSON.stringify(newVal));
            //     },
            //     deep:true,  // 是否开启深度监听 (如果被监听的属性下的对象中的数据发生改变 -> 也会触发)
            // }

            copyForm:function(newVal,oldVal){
                console.log("copyForm发生改变",newVal,oldVal);
            }

        },
        methods: {
            changeHandler(){
                console.log(this.isChecked);
            },
            clickHandler(e){
                // console.log(e.target.checked);  // 通过元素本身获取
                console.log(this.isChecked);  // 通过数据获取(change触发才会变,此时获取的是改变之前的数据)
            }
        },
    })


</script>
</html>